import React, { useState } from "react";


import { Input, Button } from "react-vant";
import { Location } from "@react-vant/icons";
import { useNavigate } from "react-router-dom";

function AddCounter({
  edTag,
  tag,
  setTag,
  name,
  setName,
  phone,
  setPhone,
  address,
  setAddress,
  floor,
  setFloor,
}) {
  const navigate = useNavigate();
  return (
    <>
      <div className="add-address-container">
        <p className="input-item">
          <Input
            prefix="收货人"
            placeholder="请输入收货人姓名"
            value={name}
            onChange={(e) => setName(e)}
          />
        </p>
        <p className="input-item">
          <Input
            value={phone}
            prefix="手机号码"
            placeholder="请输入收货人手机号码"
            onChange={(e) => setPhone(e)}
          />
        </p>
        <p className="input-item">
          <Input
            prefix="收货地址"
            placeholder="请输入详细收货地址"
            value={address}
            suffix={<Location style={{ fontSize: "23px", color: "#ff5435" }} 
            onClick={() => navigate("/outlet/loc")}
            />}
            onChange={(e) => setAddress(e)}
          />
        </p>
        <p className="input-item">
          <Input
            value={floor}
            prefix="楼号门牌"
            placeholder="如有楼号门牌，请输入"
            onChange={(e) => setFloor(e)}
          />
        </p>
        <p className="input-tag">
          <span className="tag-label">地址标签 </span>
          {edTag.map((item, index) => (
            <Button
              key={index}
              size="mini"
              round
              className="tag-btn"
              onClick={() => setTag(item)}
              style={{
                backgroundColor: item === tag ? "orange" : "#fff",
                padding: "5px 10px",
              }}
            >
              {item}
            </Button>
          ))}
        </p>
      </div>
    </>
  );
}
export default AddCounter;
